<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
        }

        .box {
            width: 400px;
            height: 400px;
            background-color: #000;
            position: relative;
        }

        .b {
            width: 100px;
            height: 100px;
            background-color: #ff0;
            position: absolute;
        }
    </style>
</head>

<body>

    <!-- <div class="a"></div> -->


    <div class="box">
        <div class="b"></div>
    </div>


    <script>

        class Drag {
            constructor(ele) {
                // 需要拖拽的对象
                this.ele = document.querySelector(ele);
                // 事件
                this.init();
                this.x;
                this.y;
            }
            init() {
                // 鼠标按下
                this.ele.onmousedown = e => {
                    // 获取鼠标在盒子中的位置
                    this.x = e.clientX - this.ele.offsetLeft;
                    this.y = e.clientY - this.ele.offsetTop;
                    this.move();   // 鼠标移动
                    this.up();    // 鼠标抬起
                }
            }
            move() {
                // 鼠标移动
                document.onmousemove = e => {
                    const left = e.clientX - this.x;
                    const top = e.clientY - this.y;
                    this.ele.style.left = left + 'px';
                    this.ele.style.top = top + 'px';
                }
            }
            up() {
                // 鼠标抬起
                document.onmouseup = () => {
                    // 清除移动事件
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }


        // new Drag('.a');



        // 在盒子里面拖拽
        // class DragInBox {
        //     constructor(ele, box) {
        //         // 需要拖拽的对象
        //         this.ele = document.querySelector(ele);
        //         this.x;
        //         this.y;

        //         this.box = document.querySelector(box);   // 1111111111111111111111111111

        //         // 事件
        //         this.init();



        //     }
        //     init() {
        //         // 鼠标按下
        //         this.ele.onmousedown = e => {
        //             // 获取鼠标在盒子中的位置
        //             this.x = e.clientX - this.ele.offsetLeft;
        //             this.y = e.clientY - this.ele.offsetTop;
        //             this.move();   // 鼠标移动
        //             this.up();    // 鼠标抬起
        //         }
        //     }
        //     move() {
        //         // 鼠标移动
        //         document.onmousemove = e => {
        //             const left = e.clientX - this.x;
        //             const top = e.clientY - this.y;


        //             // 1111111111111111111111111111111111111111111111111111111111111
        //             const maxWidth = this.box.clientWidth - this.ele.offsetWidth;
        //             const maxHeight = this.box.clientHeight - this.ele.offsetHeight;
        //             if (left < 0) left = 0;
        //             if (top < 0) top = 0;
        //             if (left > maxWidth) left = maxWidth;
        //             if (top > maxHeight) top = maxHeight;


        //             this.ele.style.left = left + 'px';
        //             this.ele.style.top = top + 'px';
        //         }
        //     }
        //     up() {
        //         // 鼠标抬起
        //         document.onmouseup = () => {
        //             // 清除移动事件
        //             document.onmousemove = null;
        //             document.onmouseup = null;
        //         }
        //     }
        // }



        class DragInBox extends Drag {
            constructor(ele, box) {
                super(ele);
                this.box = document.querySelector(box);
                this.fn()
            }
            move() {
                // 鼠标移动
                document.onmousemove = e => {
                    let left = e.clientX - this.x;
                    let top = e.clientY - this.y;


                    // 1111111111111111111111111111111111111111111111111111111111111
                    const maxWidth = this.box.clientWidth - this.ele.offsetWidth;
                    const maxHeight = this.box.clientHeight - this.ele.offsetHeight;
                    if (left < 0) left = 0;
                    if (top < 0) top = 0;
                    if (left > maxWidth) left = maxWidth;
                    if (top > maxHeight) top = maxHeight;


                    this.ele.style.left = left + 'px';
                    this.ele.style.top = top + 'px';
                }
            }


            fn() {
                console.log('父类的方法')
            }
        }


        new DragInBox('.b', '.box')



        class Range extends DragInBox {
            constructor(ele, box) {
                super(ele, box);
                this.maxWidth = this.box.clientWidth - this.ele.offsetWidth;
            }



            move() {
                // 鼠标移动
                document.onmousemove = e => {
                    let left = e.clientX - this.x;


                    if (left < 0) left = 0;
                    if (left > this.maxWidth) left = this.maxWidth;


                    this.ele.style.left = left + 'px';
                }
            }

            up() {
                // 鼠标抬起
                document.onmouseup = () => {
                    // 清除移动事件
                    document.onmousemove = null;
                    document.onmouseup = null;

                    // 验证
                    if (this.ele.offsetLeft === this.maxWidth) {
                        alert('ok')
                    } else {
                        this.ele.style.left = 0;
                    }
                }
            }

            fn() { }
        }


        // new Range('.b', '.box')




    </script>

</body>

</html>